<template>
	<cl-page>
		<view class="page-wrap">
			<view class="head">
				<view>展位图</view>
				<cl-button type="primary" round @tap="onRefresh">刷新</cl-button>
			</view>

			<!-- 展位图 -->
			<view class="booth">
				<view class="table-wrap">
					<view class="table-wrap_info">
						<view class="info-left">
							<view class="cell">
								<text class="cell-label">展会名称:</text>
								<text class="cell-value">{{ info.data?.name }}</text>
							</view>
							<view class="cell">
								<text class="cell-label">展会日期:</text>
								<text class="cell-value">{{
									info.data?.startDate
										? dayjs(info.data?.startDate).format("YYYY-MM-DD")
										: "-"
								}}</text>
							</view>
						</view>
						<view class="info-right">
							<cl-tag :type="info.status == 1 ? 'primary' : 'info'">{{
								info.status == 0 ? "未开始" : info.status == 1 ? "进行中" : "已结束"
							}}</cl-tag>
						</view>
					</view>

					<view class="table-wrap_title" v-show="info.exhBooths.length > 0">
						<text class="mr-40">展会排列图</text>
						<text style="font-size: 12px">
							<i class="iconfont icon-jingzhuangwujin" />
							<text style="color: #c0c0c0; margin-left: 10rpx">表示精装</text>
						</text>
					</view>

					<view class="table-wrap_content" border>
						<view
							v-for="(item, index) in info.exhBooths"
							:key="index"
							class="table-wrap_content--row"
						>
							<view
								v-for="(cItem, cIndex) in item"
								:key="cIndex"
								class="table-wrap_content--col"
								:class="[
									cItem.enabled == 0 || cItem.checked == 1 ? 'disabled' : '',
									cItem.type == 0 ? 'booth' : '',
									cItem.type == 2 ? 'aisle' : '',
									cItem.type == 3 ? 'exit' : '',
									cItem.type == 4 ? 'wall' : '',
									cItem.type == 7 ? 'toilet' : '',
								]"
								:style="{
									background:
										cItem.color && cItem.type == 0 ? cItem.color : '#fff',
								}"
								@tap.stop="onSelect(cItem)"
							>
								<template
									v-if="
										cItem.type == 0 ||
										cItem.type == 3 ||
										cItem.type == 6 ||
										cItem.type == 7
									"
								>
									<!-- 装修等级 -->
									<view v-if="cItem.type == 0 && cItem.level" class="level">
										<i class="iconfont icon-jingzhuangwujin" />
									</view>
									<view class="col-line">
										<text class="col-line_text" />
										<text>{{ cItem.name }}</text>
									</view>
									<!-- 展位出入口 -->
									<view v-if="cItem.type == 0 && cItem.entrance" class="col-line">
										<text class="col-line_text">
											入口：{{ cItem.entrance }}</text
										>
									</view>
									<!-- 展位类型 -->
									<view class="col-line">
										<text class="col-line_text" />
										<text>{{ getDict(cItem.type, options.type) || "-" }}</text>
									</view>
									<!-- 未启用 -->
									<view v-if="cItem.enabled == 0" class="fs-24 text-sub"
										>未启用</view
									>
									<!-- 已占位 -->
									<cl-button
										class="mt-10"
										v-if="
											cItem.user_id == userInfo.id &&
											cItem.checked == 1 &&
											router.query.type == 'edit'
										"
										type="error"
										round
										fill
										size="mini"
										@tap.stop="onCancel(cItem)"
									>
										取消占位
									</cl-button>
								</template>
							</view>
						</view>
					</view>

					<global-empty v-if="info.exhBooths.length == 0" text="清先初始化展位图" />
				</view>
			</view>
		</view>
	</cl-page>

	<cl-confirm :ref="setRefs('confirmRef')">
		<view class="modify-wrap">
			<view class="modify-wrap_list">
				<cl-textarea
					v-model="confirmForm.remark"
					placeholder="备注"
					:height="112"
				></cl-textarea>
			</view>
		</view>
	</cl-confirm>
</template>

<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref, defineComponent, reactive, computed } from "vue";

import { useCool, useStore } from "/@/cool";
import { isEmpty } from "lodash";
import dayjs from "dayjs";

const { app, user } = useStore();
const { router, service, ui, refs, setRefs } = useCool();

const userInfo = computed(() => {
	return user.info.user;
});

const confirmForm = reactive<any>({
	remark: "",
});

const options = reactive<any>({
	type: [
		{
			value: 0,
			label: "展位",
		},
		{
			value: 1,
			label: "占位",
		},
		{
			value: 2,
			label: "通道",
		},
		{
			value: 3,
			label: "出入口",
		},
		{
			value: 4,
			label: "墙体",
		},
		{
			value: 8,
			label: "厚墙体",
		},
		{
			value: 5,
			label: "消防通道",
		},
		{
			value: 6,
			label: "广告",
		},
		{
			value: 7,
			label: "卫生间",
		},
	],
});

const info = reactive<any>({
	data: {},
	exhBooths: [],
	get: () => {
		const { id } = router.query;

		// ui.showLoading();
		uni.showLoading({
			title: "加载中...",
		});

		service.booth
			.exhibitionlocationlist({
				exhibitionId: router.query?.exhibitionId,
				projectId: router.query?.projectId,
				projectTime: router.query?.time,
			})
			.then((res: any) => {
				console.info("res", res);
				info.data = res;

				if (!isEmpty(res?.exhBooths)) {
					info.exhBooths = groupByX(res.exhBooths);
					console.info("info.exhBooths", info.exhBooths);
				}
			})
			.finally(() => {
				// ui.hideLoading();
				uni.hideLoading();
			});
	},
});

function groupByX(exhBooths: any[]) {
	const grouped: any = [];

	// 遍历展位数组，根据 x 轴进行分组
	exhBooths.forEach((booth) => {
		const x = booth.x;
		if (!grouped[x]) {
			grouped[x] = [];
		}
		grouped[x].push(booth);
	});

	// 将对象的值转换为二维数组
	return Object.values(grouped);
}

function init() {
	info.get();
}

// 刷新
function onRefresh() {
	info.get();
}

// 是否不可用
function isBan(item: any) {
	return (
		item.enabled == 0 || item.type == 2 || item.type == 3 || item.type == 4 || item.type == 5
	);
}

// 是否禁用
function isDisabled(item: any) {
	return item.enabled == 0;
}

// 操作项 **** start ****
function getDict(val: any, list: any[]) {
	if (!val) {
		return "-";
	}
	const _item = list.find((item) => item.value == val);
	return _item ? _item.label : "-";
}

// 选择
function onSelect(row: any) {
	const { type } = router.query;
	if (type == "view" || row.type != 0) return false;

	if (row.enabled == 0 || row.checked == 1) {
		ui.showToast("该展位已被占用，请重新选择！");
		return false;
	}

	refs.value.confirmRef.open({
		title: `是否选择（${row.name}）展位！`,
		message: ``,
		cancelButtonText: "取消",
		confirmButtonText: "确认",
		callback(action: any) {
			if (action == "confirm") {
				const params: any = {
					// ...row,
					id: row.id,
					checked: 1,
					user_id: userInfo.value?.id,
				};

				if (confirmForm?.remark) {
					params.remark = confirmForm?.remark;
				}

				// user.logout();
				service.api.exh["booth/update"](params).then((res: any) => {
					ui.showToast("展位占位成功！");
					info.get();
				});
			}
		},
	});
}

// 取消
function onCancel(row: any) {
	const { type } = router.query;
	if (type == "view") return false;

	refs.value.confirmRef.open({
		title: `是否取消（${row.name}）展位！`,
		message: ``,
		cancelButtonText: "取消",
		confirmButtonText: "确认",
		callback(action: any) {
			if (action == "confirm") {
				// user.logout();
				const params: any = {
					// ...row,
					id: row.id,
					checked: 0,
				};

				if (confirmForm?.remark) {
					params.remark = confirmForm?.remark;
				}

				service.api.exh["booth/update"](params).then((res: any) => {
					ui.showToast("展位取消占位成功！");
					info.get();
				});
			}
		},
	});
}

onLoad(() => {
	init();
});
</script>

<style lang="scss" scoped>
.page-wrap {
	padding: 1rpx;
	.head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 10rpx 0;
		padding: 10rpx 20rpx;
	}
	.booth {
		padding: 10rpx;
		background-color: #fff;
	}
	.table-wrap {
		width: 100%;
		// 表单配置
		&_info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.info-left {
				display: flex;
				align-items: center;
			}

			.cell {
				margin-right: 20rpx;
				&-label {
					color: #999;
					margin-right: 10rpx;
				}
			}
		}

		// 标题
		&_title {
			margin-bottom: 30rpx;
		}

		// table内容
		&_content {
			width: 100%;
			// border: 1px solid #ccc;
			width: 100%;
			height: calc(100vh - 560rpx);
			overflow-x: scroll;
			overflow-y: scroll;
			// display: flex;
			&--row {
				width: 100%;
				display: flex;
				align-items: center;
				align-items: stretch;
			}
			&--col {
				padding: 28rpx 20rpx;
				text-align: center;
				cursor: pointer;
				min-width: 260rpx;
				flex-shrink: 0;
				position: relative;
				// flex: 1;
				text-align: center;
				cursor: pointer;
				// flex-shrink: 0;
				overflow: hidden;
				&:hover {
					background: #f0f0f0;
				}
				&.disabled {
					color: #ccc;
					background-color: #eee;
					// &:hover {
					// 	background-color: #eee;
					// }
				}
				&.booth {
					border-right: 1px solid #fff;
					border-bottom: 1px solid #fff;
				}
				&.aisle {
					width: 40rpx !important;
					// min-width: 20px !important;
					background-color: #fff !important;
				}
				&.exit {
					color: #fff;
					background-color: #1f7f3b !important;
				}
				&.wall {
					width: 40rpx !important;
					// min-width: 20px !important;
					// padding: 0;
					background-color: #adadad !important;
				}
				&.toilet {
					border-right: 1px solid #ccc;
					border-bottom: 1px solid #ccc;
				}
				.level {
					position: absolute;
					top: 0;
					right: 0;
					&::after {
						content: "";
						position: absolute;
						top: -114rpx;
						right: -114rpx;
						width: 0;
						height: 0;
						border: 64rpx solid transparent;
						border-right: 120rpx solid #ffd700;
						transform: rotate(135deg);
					}
					.iconfont {
						position: relative;
						z-index: 2;
					}
				}

				.col-line {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;
					height: 36rpx;
					&_text {
						// margin-right: 4px;
						color: #666;
						font-size: 24rpx;
						flex-shrink: 0;
					}
				}
			}
		}
	}
	.modify-wrap {
		// padding: 0 0 10rpx 0;
		&_list {
			// height: 112rpx;
			text-align: left;
			border-bottom: 0.7px solid $uni-border-color;
		}
	}
}
</style>
